<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>{{title}}</title>
		<link rel="shortcut icon" href="images/favicon.ico" type="image/ico" />
		<style>
			html{
				height: 100%;
			}
			header{
				margin: 10px auto;
				width: 960px;
				height: 100px;
			}
			.logo{
				float: left;
			}
			.vip-login{
				float: left;
				width: 80px;
				height: 50px;
				position: relative;
				top: 20px; 
				border-left: solid 3px #DDDDDD;
				padding-left: 20px;
			}
			
			.back-index a{
				float: right;
				font-size: 14px;
				text-decoration: none;
				color: #4D4D4D;			
				padding: 5px;
			}
			.back-index a:nth-of-type(1){
				border-left: solid 1px #4D4D4D;
				
			}
			.main{
				position: relative;
				top: 100px;
				left: -300px;
			}
			.login-link{
				position: relative;
				top: 100px;
				margin-left: 1150px;
			}
			.login-link a{
				text-decoration: none;
				color: deepskyblue;
				
			}
			#reg-span{
				font-size: 20px
			}
			#form{
				position: relative;
				top: 120px;
				width: 400px;
				margin-left: 1150px;
			}
			#form input{
				margin-top:20px ;
			}
			.input-s{
				width: 200px;
				height: 30px;
			}
			#login{
				margin-left: 1100px;
				position: relative;
				padding-left: 20px;
				top: 80px;
			}
			
		</style>
	</head>
	<body>
		<header>
			<div class="logo">
				<img src="images/logo.gif"/>				
			</div>

			<div class="vip-login">
				<img src="images/hy.gif"/>
			</div>
			
			<div class="back-index">
				<a href="/">返回首页</a>
				<a href="">帮助中心</a>
			</div>
			<br />
			<div class="main">
				<img src="images/login1.jpg"/>
			</div>
		</header>
		
		<div id="login">
			<a href=""><img src="images/facebook.png"/></a>
			<a href=""><img src="images/weixin.png"/></a>
		</div>
		
		<div class="login-link">
			<span id="reg-span">注册</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<a href="/login">登录>></a>
		</div>
		
		
		<div id="form">
			<form action="" method="post">
				<label for="username">用户名</label>
				<input type="text" name="username" class="input-s" id="username" />
				<br />
				<label for="email">邮箱</label>&emsp;
				<input type="text" name="email" id="email" class="input-s" pattern="^([a-zA-Z0-9_\.\-])+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$" />
				<br />
				<label for="password">密码</label>&emsp;
				<input type="password" name="password" class="input-s" id="password"/>
				<br />
				&emsp;&emsp;&emsp;&emsp;<label for="gender">男</label><input type="radio" name="gender" checked="" value="true" id="male">
				<label for="gender">女</label><input type="radio" name="gender" value="false" id="female"/>
				<br />
				<!--<input type="submit" value="提交注册" class="input-s"/>-->
			</form>
			<button>提交</button>
		</div>
		
		
	</body>
	<script src="js/jquery.min.js"></script>
	<script>
		$("button").click(function(){
			if($("#username").val().length <= 0 || $("#password").val().length <= 0){
				alert("用户名和密码不能为空");
				return;
			}
			$.ajax({
			    type:"POST",
			    url: '/register',
			    async:false,//同步：意思是当有返回值以后才会进行后面的js程序。
			    data:$("form").serialize(),//请求需要发送的处理数据
			    success:function(data){
			        if (data.error==0) {//根据返回值进行跳转
			        	alert(data.msg);
		        	 	$("#username").val("");
			            $("#email").val("");
			            window.location.href = '/login';
			        }else{
			        	alert(data.msg);
			        }
			    },
			});
		});
	</script>
</html>
